import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Tabs } from 'antd-mobile';
export default class MenuBar extends PureComponent {
    static propTypes = {
        currentTab: PropTypes.number,
        tabs: PropTypes.array.isRequired,
        onTabClick: PropTypes.func,
        tabBarTextStyle: PropTypes.object,
        swipeable: PropTypes.bool,
        renderTab: PropTypes.func        
    }
    
    static defaultProps = {
        currentTab: 0,
        tabs: []
    }

    renderTab = tab => {
        if (typeof this.props.renderTab === 'function') {
            return this.props.renderTab(tab)
        } else {
            return (
                <span style={{'whiteSpace': 'nowrap', 'overflow': 'hidden', 'textOverflow': 'ellipsis'}}>{tab.name}</span>
            )
        }        
    }

    handleTabChange = (tab, index) => {      
        typeof this.props.onTabClick === 'function' && this.props.onTabClick(tab, index)
    }

    render() {
        const { currentTab, tabs, tabBarTextStyle, swipeable } = this.props
        return (
            <>
                <Tabs                     
                    tabs={tabs}
                    initialPage={currentTab}
                    page={currentTab}
                    swipeable={swipeable}                  
                    renderTab={this.renderTab}  
                    onChange={this.handleTabChange} 
                    tabBarTextStyle={tabBarTextStyle}                 
                >
                    {this.props.children}
                </Tabs>
            </>
        )
    }
}